<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="shortcut icon" href="./assets/images/logo.png">
  <link rel="stylesheet" href="./assets/style/common.css">
  <link rel="stylesheet" href="./assets/iconfont/iconfont.css">
  <link rel="stylesheet" href="./index.css">
  <script src="./utils/index.js"></script>
  <script src="./index.js"></script>
  <title>小米旅行-小米在手,想走就走</title>
</head>
<body>
  <div class="page home-container">
    <!-- top-bar -->
    <div class="top-bar fixed">
      <div class="top-bar-cont tpl clearfix">
        <div class="fl"><span class="top-bar-item">让天下没有难走的旅行</span></div>
        <div class="fr">
          <a href="javascript:;" class="top-bar-item brand-color">您好，请登录</a>
          <a href="javascript:;" class="top-bar-item line-right">免费注册</a>
          <a href="javascript:;" class="top-bar-item line-right"><span class="iconfont kyan-icon-message top-bar-msg"></span>消息</a>
          <a href="javascript:;" class="top-bar-item line-right">我的旅程</a>
          <a href="javascript:;" class="top-bar-item line-right">我的订单</a>
          <a href="javascript:;" class="top-bar-item line-right">客服中心</a>
          <a href="javascript:;" class="top-bar-item iconfont kyan-icon-phone brand-color"></a>
          <a href="javascript:;" class="top-bar-item iconfont kyan-icon-wechat brand-color"></a>
        </div>
      </div>
    </div>
    <!-- header -->
    <div class="header">
      <div class="header-cont tpl clearfix">
        <div class="header-logo fl"><img class="header-logo-img" src="./assets/images/logo_large.png" alt="logo" /></div>
        <div class="header-search brand-border-color fr">
          <input class="header-filed fl" id="header-search" value="搜索旅行地/酒店/旅游/景点门票/交通" onfocus="clearSearch()" onblur="checkSearch()" />
          <span class="header-button fl brand-bgc"><span class="iconfont kyan-icon-search"></span></span>
        </div>
      </div>
    </div>
    <!-- nav-bar -->
    <div class="nav-bar brand-bgc">
      <div class="nav-bar-cont tpl text-center">
        <a href="./index.html" class="nav-bar-item nav-bar-item-active">首页</a>
        <a href="./pages/hotCity/index.html" class="nav-bar-item">热门旅游城市</a>
        <a href="./pages/sightsFood/index.html" class="nav-bar-item">风景美食</a>
        <a href="./pages/culture/index.html" class="nav-bar-item">文化底蕴</a>
        <a href="./pages/recommendedWay/index.html" class="nav-bar-item">路线推荐</a>
        <a href="./pages/teamShow/index.html" class="nav-bar-item">团队介绍</a>
      </div>
    </div>
    <!-- trip-way -->
    <div class="trip-way">
      <div class="tpl">
        <span class="trip-way-tag inline-block brand-bgc fw700">域外直通车</span>
        <a href="javascript:;" class="trip-way-item"><span class="iconfont kyan-icon-hotel brand-color"></span>海外酒店</a>
        <a href="javascript:;" class="trip-way-item"><span class="iconfont kyan-icon-airplane brand-color"></span>国际机票</a>
        <a href="javascript:;" class="trip-way-item"><span class="iconfont kyan-icon-taxi brand-color"></span>境外租车</a>
        <a href="javascript:;" class="trip-way-item"><span class="iconfont kyan-icon-train brand-color"></span>国际火车票</a>
        <a href="javascript:;" class="trip-way-item"><span class="iconfont kyan-icon-flag brand-color"></span>出境游</a>
        <a href="javascript:;" class="trip-way-item"><span class="iconfont kyan-icon-diamond brand-color"></span>高端游</a>
        <a href="javascript:;" class="trip-way-item"><span class="iconfont kyan-icon-macao brand-color"></span>境外•港澳台</a>
        <a href="javascript:;" class="trip-way-item"><span class="iconfont kyan-icon-global brand-color"></span>签证</a>
        <a href="javascript:;" class="trip-way-item"><span class="iconfont kyan-icon-security brand-color"></span>保险</a>
      </div>
    </div>
    <!-- swipe -->
    <div class="swipe div-center">
      <div class="swipe-item swipe-item-active" id="swipe-item1"></div>
      <div class="swipe-item" id="swipe-item2"></div>
      <div class="swipe-item" id="swipe-item3"></div>
      <div class="swipe-item" id="swipe-item4"></div>
      <div class="swipe-cont tpl">
        <div class="tabs clearfix">
          <div class="tab-list fl brand-bgc" id="tab-list">
            <div class="tab-item has-hand tab-item-active" onclick="changeTab(0)"><span class="tab-name">酒店</span></div>
            <div class="tab-item has-hand" onclick="changeTab(1)"><span class="tab-name">机票</span></div>
            <div class="tab-item has-hand" onclick="changeTab(2)"><span class="tab-name">旅游</span></div>
            <div class="tab-item has-hand" onclick="changeTab(3)"><span class="tab-name">跟团游</span></div>
            <div class="tab-item has-hand" onclick="changeTab(4)"><span class="tab-name">自由行</span></div>
            <div class="tab-item has-hand" onclick="changeTab(5)"><span class="tab-name">火车</span></div>
            <div class="tab-item has-hand" onclick="changeTab(6)"><span class="tab-name border-transparent">用车</span></div>
          </div>
          <div class="tab-content fr" id="tab-content">
            <div class="tab-panel tab-panel-active">
              <div class="tab-panel-title brand-color fw700">国内酒店</div>
              <form action="index.html" method="post" class="tab-panel-form" id="tab-panel-form">
                <div class="tab-panel-form-item clearfix">
                  <span class="tab-panel-form-key fl">目的地</span>
                  <input type="text" class="tab-panel-form-value fr" id="tab-panel-form-value" value="中文/拼音" />
                </div>
                <div class="tab-panel-form-item clearfix">
                  <span class="tab-panel-form-key fl">入住时间</span>
                  <input type="text" class="tab-panel-form-value fr" value="2019-11-16" />
                </div>
                <div class="tab-panel-form-item clearfix">
                  <span class="tab-panel-form-key fl">退房时间</span>
                  <input type="text" class="tab-panel-form-value fr" value="2019-11-17" />
                </div>
                <div class="tab-panel-form-item clearfix">
                  <span class="tab-panel-form-key fl">房间数</span>
                  <select class="tab-panel-form-value tab-panel-form-select fr">
                    <option value="1" selected = "selected">1间</option>
                    <option value="1">2间</option>
                    <option value="1">3间</option>
                    <option value="1">4间</option>
                    <option value="1">5间</option>
                    <option value="1">6间</option>
                    <option value="1">7间</option>
                    <option value="1">8间</option>
                    <option value="1">9间</option>
                    <option value="1">10间</option>
                  </select>
                </div>
                <div class="tab-panel-form-item clearfix">
                  <span class="tab-panel-form-key fl">关键词</span>
                  <input type="text" class="tab-panel-form-value fr" value="(选填)酒店名/地标/商圈" />
                </div>
                <button class="tab-panel-btn sub-bgc">搜 索</button>
              </form>
            </div>
            <div class="tab-panel">
              <div class="tab-panel-title brand-color fw700">国内机票</div>
              <div class="no-network">网络不给力啊, 请小主稍后再试QAQ</div>
            </div>
            <div class="tab-panel">
              <div class="tab-panel-title brand-color fw700">自由行</div>
              <div class="no-network">网络不给力啊, 请小主稍后再试QAQ</div>
            </div>
            <div class="tab-panel">
              <div class="tab-panel-title brand-color fw700">周边游</div>
              <div class="no-network">网络不给力啊, 请小主稍后再试QAQ</div>
            </div>
            <div class="tab-panel">
              <div class="tab-panel-title brand-color fw700">周边跟团</div>
              <div class="no-network">网络不给力啊, 请小主稍后再试QAQ</div>
            </div>
            <div class="tab-panel">
              <div class="tab-panel-title brand-color fw700">国内火车票</div>
              <div class="no-network">网络不给力啊, 请小主稍后再试QAQ</div>
            </div>
            <div class="tab-panel">
              <div class="tab-panel-title brand-color fw700">国内接送机</div>
              <div class="no-network">网络不给力啊, 请小主稍后再试QAQ</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- container -->
    <div class="container">
      <div class="tpl">
        <!-- hot -->
        <div class="card">
          <div class="card-header">热门推荐</div>
          <div class="card-cont hot clearfix" id="hot">
            <a href="javascript:;" class="hot-item fl has-hand sanya" onmouseenter="showDetailsMask(0)" onmouseleave="hideDetailsMask(0)">
              <div class="hot-round"></div>
              <div class="hot-cont">
                <div class="hot-cont-item hot-cont-item-first">
                  <div class="hot-cont-title fw700">三亚</div>
                </div>
                <div class="hot-cont-item hot-cont-item-sec">
                  <div class="hot-cont-txt">
                    ¥<span class="price">1243</span>/人起
                  </div>
                </div>
              </div>
              <div class="hot-details">
                <div class="hot-details-mask sanya"></div>
                <div class="hot-details-cont">
                  <div class="hot-details-cont-mask"></div>
                  <div class="hot-details-cont-info">
                    <div class="hot-details-title fw700">三亚</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-flag"></span>景点:三亚亚特兰蒂斯水世界</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-tableware"></span>美食:冬瓜海螺汤、椰子饭</div>
                  </div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="hot-item fl has-hand chongqing" onmouseenter="showDetailsMask(1)" onmouseleave="hideDetailsMask(1)">
              <div class="hot-round"></div>
              <div class="hot-cont">
                <div class="hot-cont-item hot-cont-item-first">
                  <div class="hot-cont-title fw700">重庆</div>
                </div>
                <div class="hot-cont-item hot-cont-item-sec">
                  <div class="hot-cont-txt">
                    ¥<span class="price">695</span>/人起
                  </div>
                </div>
              </div>
              <div class="hot-details">
                <div class="hot-details-mask chongqing"></div>
                <div class="hot-details-cont">
                  <div class="hot-details-cont-mask"></div>
                  <div class="hot-details-cont-info">
                    <div class="hot-details-title fw700">重庆</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-flag"></span>景点:重庆三峡大坝</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-tableware"></span>美食:辣子鸡、毛血旺、豆花</div>
                  </div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="hot-item fl has-hand beijing" onmouseenter="showDetailsMask(2)" onmouseleave="hideDetailsMask(2)">
              <div class="hot-round"></div>
              <div class="hot-cont">
                <div class="hot-cont-item hot-cont-item-first">
                  <div class="hot-cont-title fw700">北京</div>
                </div>
                <div class="hot-cont-item hot-cont-item-sec">
                  <div class="hot-cont-txt">
                    ¥<span class="price">1109</span>/人起
                  </div>
                </div>
              </div>
              <div class="hot-details">
                <div class="hot-details-mask beijing"></div>
                <div class="hot-details-cont">
                  <div class="hot-details-cont-mask"></div>
                  <div class="hot-details-cont-info">
                    <div class="hot-details-title fw700">北京</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-flag"></span>景点:天安门城楼、故宫</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-tableware"></span>美食:驴打滚、豆汁、羊蝎子</div>
                  </div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="hot-item fl has-hand xiamen" onmouseenter="showDetailsMask(3)" onmouseleave="hideDetailsMask(3)">
              <div class="hot-round"></div>
              <div class="hot-cont">
                <div class="hot-cont-item hot-cont-item-first">
                  <div class="hot-cont-title fw700">厦门</div>
                </div>
                <div class="hot-cont-item hot-cont-item-sec">
                  <div class="hot-cont-txt">
                    ¥<span class="price">775</span>/人起
                  </div>
                </div>
              </div>
              <div class="hot-details">
                <div class="hot-details-mask xiamen"></div>
                <div class="hot-details-cont">
                  <div class="hot-details-cont-mask"></div>
                  <div class="hot-details-cont-info">
                    <div class="hot-details-title fw700">厦门</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-flag"></span>景点:厦门大学、日月谷温泉</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-tableware"></span>美食:芋包、烧仙草、炸五香</div>
                  </div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="hot-item fl has-hand guilin" onmouseenter="showDetailsMask(4)" onmouseleave="hideDetailsMask(4)">
              <div class="hot-round"></div>
              <div class="hot-cont">
                <div class="hot-cont-item hot-cont-item-first">
                  <div class="hot-cont-title fw700">桂林</div>
                </div>
                <div class="hot-cont-item hot-cont-item-sec">
                  <div class="hot-cont-txt">
                    ¥<span class="price">552</span>/人起
                  </div>
                </div>
              </div>
              <div class="hot-details">
                <div class="hot-details-mask guilin"></div>
                <div class="hot-details-cont">
                  <div class="hot-details-cont-mask"></div>
                  <div class="hot-details-cont-info">
                    <div class="hot-details-title fw700">桂林</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-flag"></span>景点:世外桃源、十里画廊</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-tableware"></span>美食:黄焖鸡、啤酒鱼、田螺</div>
                  </div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="hot-item fl has-hand chengdu" onmouseenter="showDetailsMask(5)" onmouseleave="hideDetailsMask(5)">
              <div class="hot-round"></div>
              <div class="hot-cont">
                <div class="hot-cont-item hot-cont-item-first">
                  <div class="hot-cont-title fw700">成都</div>
                </div>
                <div class="hot-cont-item hot-cont-item-sec">
                  <div class="hot-cont-txt">
                    ¥<span class="price">848</span>/人起
                  </div>
                </div>
              </div>
              <div class="hot-details">
                <div class="hot-details-mask chengdu"></div>
                <div class="hot-details-cont">
                  <div class="hot-details-cont-mask"></div>
                  <div class="hot-details-cont-info">
                    <div class="hot-details-title fw700">成都</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-flag"></span>景点:大熊猫繁育研究基地</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-tableware"></span>美食:串串、钵钵鸡、冒菜</div>
                  </div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="hot-item fl has-hand guangzhou" onmouseenter="showDetailsMask(6)" onmouseleave="hideDetailsMask(6)">
              <div class="hot-round"></div>
              <div class="hot-cont">
                <div class="hot-cont-item hot-cont-item-first">
                  <div class="hot-cont-title fw700">广州</div>
                </div>
                <div class="hot-cont-item hot-cont-item-sec">
                  <div class="hot-cont-txt">
                    ¥<span class="price">800</span>/人起
                  </div>
                </div>
              </div>
              <div class="hot-details">
                <div class="hot-details-mask guangzhou"></div>
                <div class="hot-details-cont">
                  <div class="hot-details-cont-mask"></div>
                  <div class="hot-details-cont-info">
                    <div class="hot-details-title fw700">广州</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-flag"></span>景点:长隆野生动物世界</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-tableware"></span>美食:煲仔饭、白斩鸡、肠粉</div>
                  </div>
                </div>
              </div>
            </a>
            <a href="javascript:;" class="hot-item fl has-hand lijiang" onmouseenter="showDetailsMask(7)" onmouseleave="hideDetailsMask(7)">
              <div class="hot-round"></div>
              <div class="hot-cont">
                <div class="hot-cont-item hot-cont-item-first">
                  <div class="hot-cont-title fw700">丽江</div>
                </div>
                <div class="hot-cont-item hot-cont-item-sec">
                  <div class="hot-cont-txt">
                    ¥<span class="price">1017</span>/人起
                  </div>
                </div>
              </div>
              <div class="hot-details">
                <div class="hot-details-mask lijiang"></div>
                <div class="hot-details-cont">
                  <div class="hot-details-cont-mask"></div>
                  <div class="hot-details-cont-info">
                    <div class="hot-details-title fw700">丽江</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-flag"></span>景点:玉龙雪山、丽江古城</div>
                    <div class="hot-details-txt"><span class="iconfont kyan-icon-tableware"></span>美食:杜鹃花炒蛋、咣当酒</div>
                  </div>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <!-- footer -->
    <!-- <div class="footer">
      <div class="tpl">
        <div>This is footer.</div>
        <div>Developing...</div>
      </div>
    </div> -->
    <!-- copyright -->
    <div class="copyright">
      <div class="tpl text-center">
        <div class="copyright-info">
          <img src="./assets/images/logo.png" class="copyright-logo" alt="logo">
          <span class="copyright-name">小米旅行</span>
        </div>
        <div class="copyright-support">小米团队提供技术支持</div>
      </div>
    </div>
  </div>
</body>
</html>